
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切换的导航</title>
<style type="text/css">
body {padding-top:100px;text-align:center;background-color:#242424;}
.menu {position:relative;display:inline-block;height:26px;overflow:hidden;padding:0 10px;font-size:12px;border:1px solid #CBCBCB;background-color:#000000;
	*display:inline;*zoom:1;
	box-shadow:0 0 3px #D2D2D2;border-radius:3px;
}
.menu a {position:relative;top:0;float:left;height:52px;overflow:hidden;padding:0 5px;line-height:26px;line-height:28px\9;text-decoration:none;color:#99CC29;
	-moz-transition:all 400ms ease-out;
	-webkit-transition:all 400ms ease-out;
	-o-transition:all 400ms ease-out;
	-ms-transition:all 400ms ease-out;
	transition:all 400ms ease-out;
}
.menu a span {display:block;height:26px;padding:0 5px;line-height:26px;font-family:verdana;
	_float:left;
}
.menu a:hover {top:-26px;background-color:#242424;}
.menu a:hover span {color:#FF6500;cursor:pointer;}
</style>
</head>

<body>
<div class="menu"><a href="###">首页<span>home</span></a> <a href="###">导航1<span>menu1</span></a> <a href="###">导航2<span>menu2</span></a> <a href="###">导航3<span>menu3</span></a></div>
</body>
</html>
